<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="./audiocss/audio.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="audio-player">
      <div class="audio-ui">
        <img src="./Blossom（同人专辑）封面.jpg" alt="" />
        <!-- 封面信息 -->
        <div class="audio-status">
          <div class="details">
            <p>
              <span>R.I.N</span>
              <span>綾倉盟</span>
            </p>
          </div>

          <!-- 进度条 -->
          <div class="jindutiao">
            <label>
              <div class="progress"></div>
              <input type="range" value="0" min="0" max="100" step="1" />
            </label>
          </div>
          <!-- 时间 -->
          <div class="time">
            <span class="time-before"></span>
            <span class="time-after">07:26</span>
          </div>
          <!-- 上一首 下一首 播放 -->
          <div class="controls">
            <ul>
              <li class="prew">
                <span><i class="fa fa-backward"></i></span>
              </li>
              <li class="play">
                <span>
                  <i class="fa fa-pause"></i> <i class="fa fa-play"></i
                ></span>
                <!-- <span class="glyphicon glyphicon-play play" aria-hidden="true"></span> -->
              </li>
              <li class="next">
                <span><i class="fa fa-forward"></i></span>
              </li>
            </ul>
          </div>
          <!-- 音量条 -->
          <div class="volume">
            <span
              ><i class="fa fa-volume-up"></i
              ><i class="fa fa-volume-off off"></i
            ></span>
            <label>
              <div class="progress"></div>
              <input type="range" value="0" min="0" max="100" step="1" />
            </label>
          </div>
        </div>
        <!-- 播放列表 -->
        <div class="play-list">
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./Blossom（同人专辑）封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>R.I.N</h4>
              <p>綾倉盟</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./Blossom（同人专辑）封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>Close to you (and me)</h4>
              <p>綾倉盟</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./POP｜CULTURE_2封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>Snowlight</h4>
              <p>坂上なち</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./Poptrick封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>Rapture - Taishi Remix</h4>
              <p>市松椿(Taishi)</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./SOL_ET_LUNA封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>Sol Et Luna</h4>
              <p>綾倉盟</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./Sprout_Intention封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>永遠の水面</h4>
              <p>葉月ゆら</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./POP｜CULTURE_3封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>Peaceful Romancer</h4>
              <p>mican*</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./White_clear封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>comouflage</h4>
              <p>綾倉盟</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./STRUCTURED_DANCEHALL封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>Dithering Train</h4>
              <p>綾倉盟</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./Adrastea封面.jpg" alt="" />
            </div>
            <div class="singer-name">
              <h4>SUPER MOON</h4>
              <p>市松椿</p>
            </div>
          </div>
          <div class="playlist-item">
            <div class="zhuanjifengm">
              <img src="./RE：code封面.png" alt="" />
            </div>
            <div class="singer-name">
              <h4>トランジスタンス</h4>
              <p>綾倉盟</p>
            </div>
          </div>
        </div>
        <audio
          src="./Studio ＂Syrup Comfiture＂ - R.I.N.mp3"
          autoplay
          style="height: 30px;"
        ></audio>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="./mainjs/main.js"></script>
  </body>
</html>
